<template>
  <div class="attGroup">
    <div class="addAttGroup">
    <el-button type="primary" @click="addAttGroup">新增考勤组</el-button>
    </div>
    <!-- 数据表 -->
    <div class="attTable">
      <data-table
        :tableheader="tableheader"
        :datatable="tableData"
        :loading="loading"
        :operation="operation"
        :client-height="clientHeight"
        @editData="editData($event)"
        @deleteData="deleteData($event)"
      />
    </div>
    <!-- 分页 -->
    <pagination
      :page="page"
      :count="count"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></pagination>
    <!-- 新增编辑考勤组 -->
    <attgroup-dialog
    :dialog-visible="groupDialogVb"
    :dataform="groupData"
    :datedef="datedef"
    :dateprop="dateProp"
    :dialog-title="dialogTitle"
    :dialog-type="attOrEditType"
    @canceladd="cancelAdd"
    @postAttGroup="postAttGroup"
    >
    </attgroup-dialog>
    <!-- 删除用户弹窗 -->
    <add-dialog
      :title="dialogTitle"
      :dialogvisible="deleteDialog"
      @closeDialog="handleClose"
      @determine="deleteUser"
    >
      <template v-slot:add-content>
        <p class="deleteUser">是否确定删除该考勤组？</p>
      </template>
    </add-dialog>
  </div>
</template>

<script>
import DataTable from "@/views/components/dataTable";
import AttgroupDialog from "@/views/components/attGroupDialog";
import addDialog from "@/views/components/addDialog";
import pagination from "@/views/components/pagination";
export default {
  components: {
    DataTable,
    AttgroupDialog,
    addDialog,
    pagination,
  },
  data() {
    return {
      loading: false, // 加载开关
      deleteDialog: false, // 删除弹窗开关
      groupDialogVb: false, // 添加编辑考勤组弹窗开关
      dialogTitle:'', // 弹窗标题
      deteleId: '', // 删除的id
      attOrEditType: 1, //新增编辑考勤组类型， 1.新增  2.编辑
      count: 0, //总数据量
      clientHeight: '70vh', // 数据表高度
      // 表头
      tableheader: [
        {
          label: "考勤组名称",
          prop: "name",
          width: "250",
          issort: false,
        },
        {
          label: "考勤人数",
          prop: "userNum",
          width: "250",
          issort: true, //用于判断是否排序
        },
        {
          label: "类型",
          prop: "type",
          width: "250",
          issort: false,
        },
        {
          label: "考勤时间",
          prop: "attendanceTime",
          width: "260",
          issort: false,
        },
        {
          label: "状态",
          prop: "attendanceRule",
          width: "250",
          issort: false,
        },
      ],
      // 数据列表
      tableData: [],
      // 分页
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      // 数据表操作项
      operation: {
        isedit: true,
        isdelete: true,
      },
      // 新增编辑考勤组数据
      groupData: {
        attendanceGroup: {
          id: null, // 考勤组ID
          name: "", // 考勤组名称
          type: 1, // 考勤类型
          offday: [6, 0], // 休息日选择
          weekType: 1, // 考勤类型为大小周可选 1. 大 > 小 2.小 > 大
        },
        pepId: [], // 已选择人员ID
        pepGroup: [] // 已选择人员
      },
      datedef: [], // 日历组件数据表
      dateProp: 'date', // 对应日期字段名
    };
  },
  mounted() {
    this.getAttGroupList();
  },
  methods:{
    // 删除用户弹窗关闭按钮
    handleClose() {
      this.deleteDialog = false;
    },
    // 获取考勤组数据列表
    async getAttGroupList(pageNum, pageSize) {
      this.loading = true;
      let res = await this.$http.get('/group/list', {
        params:{
          pageNum: pageNum || 1,
          pageSize: pageSize || 10
        }
      });
      this.count = res.data.count;
      this.tableData = res.data.list;
      this.loading = false;
    },
    // 新增考勤组点击按钮
    async addAttGroup() {
      this.groupDialogVb = true;
      this.attOrEditType = 1;
      this.dialogTitle = '新增考勤组';
    },
    // 关闭新增考勤组弹窗
    cancelAdd() {
      this.groupDialogVb = false;
    },
    // 表格编辑按钮
    editData(row) {
      this.groupDialogVb = true;
      this.$http.get('/group/detail', {
        params:{
          id: row.id
        }
      }).then( res => {
        this.attOrEditType = 2;
        this.dialogTitle = '编辑考勤组';
        this.groupData.attendanceGroup.id = res.data.id;
        this.groupData.attendanceGroup.name = res.data.name;
        this.groupData.attendanceGroup.type = res.data.type;
        this.groupData.attendanceGroup.offday = res.data.weekends;
        this.groupData.pepId = res.data.userIds;
      })
    },
    // 新增编辑考勤组弹窗保存按钮
    async postAttGroup() {
      let res;
      if(this.attOrEditType == 1) {
        res = await this.$http.post('/group/saveOrUpdate', {
          name: this.groupData.attendanceGroup.name,
          type: this.groupData.attendanceGroup.type,
          weekends: this.groupData.attendanceGroup.offday,
          userIds: this.groupData.pepId,
        })
      }else{
        res = await this.$http.post('/group/saveOrUpdate', {
          id: this.groupData.attendanceGroup.id,
          name: this.groupData.attendanceGroup.name,
          type: this.groupData.attendanceGroup.type,
          weekends: this.groupData.attendanceGroup.offday,
          userIds: this.groupData.pepId,
        })
      }
      if(res.code == 0) {
        this.$message({
          message: res.message,
          type: 'success'
        });
        this.getAttGroupList(this.page.pageNum, this.page.pageSize);
        this.groupData.pepId = [];
        this.groupData.pepGroup = [];
        this.groupDialogVb = false;
      }
    },
    // 表格删除按钮
    deleteData(row) {
      this.deleteDialog = true;
      this.dialogTitle = '删除提示';
      this.deteleId = row.id;
    },
    // 确定删除按钮
    async deleteUser() {
      let res = await this.$http.post('/group/delete', {
        id: this.deteleId
      })
      if(res.code == 0) {
        this.$message({
          message: res.message,
          type: 'success'
        });
        this.getAttGroupList();
        this.deleteDialog = false;
      }
    },
    // 页面数量改变时触发事件
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getAttGroupList(this.page.pageNum, val);
    },
    // 当前页改变时触发事件
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getAttGroupList(val, this.page.pageSize);
    },
  }
};
</script>

<style lang="scss">
.attGroup {
  padding: 15px;
  .addAttGroup{
  .el-button {
    &:first-child {
      background-color: #4180b1;
      border-color: #4180b1;
      color: #fff;
    }
  }
  }
  .attTable {
    margin-top: 20px;
  }
}
</style>